<template>
  <div class="top">
    <div class="top-normal" v-for="item in shoppingList" :key="item.id">
      <p class="check"><input type="checkbox" /></p>
      <div class="right">
        <div class="right-top">
          <img :src="item.imgUrl" alt="" />
          <div class="rightTopright">
            <p style="font-size: 13px">{{ item.name }}</p>
            <select name="" id="" style="margin-top: 10px; font-size: 10px">
              <option :value="item.color">{{ item.color }}</option>
            </select>
            <div
              style="
                width: 240px;
                margin-top: 45px;
                display: flex;
                justify-content: space-between;
              "
            >
              <p style="color: orange; font-size: 18px">
                {{ item.price | setPrice }}
              </p>
              <p>
                <button style="width: 20px">-</button>
                <input
                  type="text"
                  name=""
                  id=""
                  :value="item.num"
                  style="width: 40px; text-align: center"
                />
                <button style="width: 20px">+</button>
              </p>
            </div>
          </div>
        </div>
        <change-vue :changeData="item.change"></change-vue>
        <gift-vue :giftData="item.gift"></gift-vue>
        <serve-vue :serverData="item.server"></serve-vue>
      </div>
    </div>
  </div>
</template>

<script>
import changeVue from "./change.vue";
import giftVue from "./add.vue";
import serveVue from "./serve.vue";
export default {
  data() {
    return {
      shoppingList: [
        {
          id: 1,
          name: "米家互联网洗烘一体机10kg",
          color: "白色",
          price: 1999,
          num: 1,
          imgUrl:
            "https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1653226730.80575739.jpg",
          change: [
            {
              id: 1,
              name: "加599元的小米蓝牙...",
              price: 599,
              cut: 100,
            },
            {
              id: 2,
              name: "加299元得小米真无...",
              price: 299,
              cut: 100,
            },
            {
              id: 3,
              name: "加139元得耳机Air2 SE",
              price: 139,
              cut: 30,
            },
          ],
          gift: [],
          server: [],
        },
        {
          id: 2,
          name: "小米真无线蓝牙耳机Air2 SE",
          color: "白色",
          price: 169,
          num: 1,
          imgUrl:
            "https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1589439786.76992727.jpg",
          change: [],
          gift: [],
          server: [],
        },
        {
          id: 3,
          name: "MIX FOLD 折叠屏手机",
          color: "12GB+512GB 黑色",
          price: 10999,
          num: 1,
          imgUrl:
            "https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1617098700.31877799.jpg",
          change: "",
          gift: [
            {
              id: 1,
              name: "小米环保袋",
              color:"橘色",
              count: 1,
              imgUrl: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimgservice.suning.cn%2Fuimg1%2Fb2c%2Fimage%2F5Db5UuI-Wz0glCosiopsbQ.jpg_800w_800h_4e&refer=http%3A%2F%2Fimgservice.suning.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656944188&t=0b80f2d0ed8e590700a0fc440f33682a",
            },
            {
              id: 2,
              name: "MIX FOLD 芳纶纤维保护壳",
              color:"黑色",
              count: 1,
              imgUrl: "https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1617096912.21188910.jpg?thumb=1&w=75&h=75",
            },
          ],
          server: [
            {
              id: 1,
              name: "意外保护 | 云空间服务",
            },
          ],
        },
      ],
    };
  },
  components: {
    changeVue,
    giftVue,
    serveVue,
  },
  filters: {
    setPrice(val) {
      return "￥" + val;
    },
  },
};
</script>

<style scoped lang="scss">
.top-normal {
  width: 380px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  background-color: white;
  border-radius: 5px;
  margin-top: 10px;
  .check {
    margin-top: 40px;
    margin-left: 10px;
    input {
      font-size: 20px;
    }
  }
}
.right-top {
  display: flex;
  width: 350px;
  margin-top: 10px;
  img {
    width: 90px;
    height: 100px;
  }
  .rightTopright {
    margin-left: 10px;
  }
}
</style>